<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href='<tiles:getAsString name="css_font"/>'>
<link rel="stylesheet" type="text/css" href='<tiles:getAsString name="css_index"/>'>
<link rel="stylesheet" type="text/css" href='<tiles:getAsString name="css_button"/>'>
<link rel="stylesheet" type="text/css" href='<tiles:getAsString name="css_table"/>'>
<%-- <link rel="stylesheet" href="${initParam.root }css/blitzer/jquery-ui-1.10.3.custom.css"> --%>
<style type="text/css">
	#container{
		width: 90%;
		/* border: 1px solid black; */
		margin-left: auto;
		margin-right: auto; /* 좌우 여백 동일하게 하여 중앙정렬 */
		/* font: medium/1.5 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; */
	}
	#header{
		padding: 5px; /* 내용과 테두리 사이 간격 할당 */
		text-align: center;
		width: 100%;
		height: 140px; padding : 7px; /* 내용과 테두리 사이 간격 할당 */
		border-bottom: 1px solid silver;
		background-color: white;
	}
	#left {
		margin-top: 20px;
		height: 600px;
		width: 15%;
		float: left; /* 엘리먼트 부유 위치 지정 left, float 을 사용해 div 를 수평으로 나란히
								정렬하기 위해 사용 */
		padding: 30px;
		-moz-border-radius: 12px;
		-khtml-border-radius: 12px;
		-webkit-border-radius: 12px;
		border-radius: 12px;
	}
	#main{
		text-align: left;
		height: 600px;
		float: left;
		/* clear: both; */
		margin: 0;
		margin-top:20px;
		height: 100%;
		width: 55%;
		padding: 20px;
		/* -moz-border-radius: 12px;
		-khtml-border-radius: 12px;
		-webkit-border-radius: 12px;
		border-radius: 12px; */
	}
	#right {
		margin-top:20px;
		padding: 3px;
		height: 600px;
		width: 20%;
		float: left; /* 엘리먼트 부유 위치 지정 left, float 을 사용해 div 를 수평으로 나란히
							정렬하기 위해 사용 */
	}
	#footer{
		text-align: center;
		padding: 5px;
		/* clear: both; */ /* float 을 이용한 요소 아래에 배치시키기 위해 float 속성 초기화 */
		height: 80px;
		width: 100%;
		clear: both; /* float 을 사용한 요소 아래에 위치 시킨다. */
		/* border-top: 2px solid #D8D8D8; */
		background-color: #EAEAEA;
		border-top: 1px solid silver;
	}
</style>
</head>
<body>
<div id="container">
	<div id="header"><tiles:insertAttribute name="header"/></div>
	<div id="left"><tiles:insertAttribute name="left"/></div>
	<div id="main"><tiles:insertAttribute name="main"/></div>
	<div id="right"><tiles:insertAttribute name="right"/></div>
	<div id="footer"><tiles:insertAttribute name="footer"/></div>
</div>
</body>
</html>